<template>
  <div>
    <button @click="requstWs">点击发起websocket请求</button>
  </div>
</template>
<script>
import { sendWebsocket, closeWebsocket } from '@/utils/websocket.js'
 
export default {
  beforeDestroy () {
    // 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面
    // 在需要主动关闭ws的地方都可以调用该方法
    closeWebsocket()
  },
  methods: {
    // ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
    wsMessage (data) {
      const dataJson = data
      console.log( ' sucess sucess sucess' )
      console.log(dataJson)
       console.log( ' sucess sucess sucess' )
      // 这里写拿到数据后的业务代码
    },
    // ws连接失败，组件要执行的代码
    wsError (error) {
       console.log('错误 错误')
       console.log(error)
       console.log('错误 错误')
      // 比如取消页面的loading
    },
    requstWs () {
      console.log('点击触发了吗   ')
      // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
      closeWebsocket()
      // 跟后端协商，需要什么参数数据给后台
      const obj = {
        monitorUrl: 'xxxxxxxxxxxxx',
        userName: 'xxxxxxxxxx'
      }
      // 发起ws请求
      // sendWebsocket('ws://test.ws.com', obj, this.wsMessage, this.wsError)
       sendWebsocket('ws://192.1.102.59:9090', obj, this.wsMessage, this.wsError)
      // 192.1.102.59:9090

    }
  }
}
</script>
 